<script setup>
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { onMounted, ref } from 'vue'

const tableData = ref([])


onMounted(()=>{
  getList()
  getRoleList()
})

const getList=async ()=>{
 const res= await axios.get('/adminapi/users')
//  console.log(res)
  tableData.value=res.data

}
const roleList=ref([])
// 获取权限列表
const getRoleList=async ()=>{
 const res= await axios.get('/adminapi/roles')
 roleList.value=res.data
//  console.log(roleList.value)
  // console.log(tableData.value.rights)
}

// 删除
const handleRemove=async (item)=>{
// console.log(item)
  await axios.delete(`/adminapi/users/${item.id}`)
  // 提示消息删除成功
  // console.log(res)
  ElMessage.success('删除成功')
  // 重新渲染
  getList()
}

// 更新
const showRoleDialog = ref(false)
// 存入id
const currentItem=ref([])
const handleUpdate = (item)=>{
  // console.log(item)
  // console.log(item.username)
  updataUserList.value.roleId=item.roleId
  updataUserList.value.username=item.username
  updataUserList.value.password=item.password

  currentItem.value=item
  // console.log(updataUserList.value)
  console.log(updataUserList.value)
  showRoleDialog.value=true


}

const updataUserListRef=ref()
const updataUserList=ref({
  roleId:'',
  username:'',
  password:''
})

const rules=ref({
  roleId:[{required:true,message:'请输入角色名称',trigger:'blur'}],
  username:[{required:true,message:'请输入用户名',trigger:'blur'}],
  password:[{required:true,message:'请输入密码',trigger:'blur'}]
})


const handleConfirm=()=>{
  updataUserListRef.value.validate(async valid=>{
    if(valid){
      // console.log(updataUserList)
      // console.log(currentItem.value.id)
      await axios.put(`/adminapi/users/${currentItem.value.id}`,updataUserList.value)
      ElMessage.success('更新成功')
      showRoleDialog.value=false
      getList()
    }
  })

}

// 添加用户
const showUserDialog = ref(false)
const addUserListRef=ref()
const handleAddUser=()=>{
  // 重置表单校验
  // addUserListRef.value.resetFields()
  showUserDialog.value=true
}
const addUserList=ref({
  username:'',
  password:'',
  roleId:''
})

const rulesUser=ref({
  username:[{required:true,message:'请输入用户名',trigger:'blur'}],
  password:[{required:true,message:'请输入密码',trigger:'blur'}],
  roleId:[{required:true,message:'请选择角色',trigger:'blur'}]
})

const handleCancel=()=>{
  // 清空表单
  addUserList.value={
    username:'',
    password:'',
    roleId:''
  }
  // 重置表单
  addUserListRef.value.resetFields()
  showUserDialog.value=false
}


const handeleAddBtn=()=>{
  addUserListRef.value.validate(async isOk=>{
    if(isOk){
      // console.log(addUserList.value)
      await axios.post('/adminapi/users',addUserList.value)
      ElMessage.success('添加成功')
      addUserList.value={
        username:'',
        password:'',
        roleId:''}
        // 重置表单
  addUserListRef.value.resetFields()
      showUserDialog.value=false
      getList()
    }
  })
}

const handleUpCancel=()=>{
  // 重置表单
 // 清空表单
 updataUserList.value={
    username:'',
    password:'',
    roleId:''
  }
  // 重
  updataUserListRef.value.resetFields()
  showRoleDialog.value=false
}
</script>


<template>
  <div>
    <el-button type="primary" @click="handleAddUser()">添加用户</el-button>

    <el-table  stripe :data="tableData" style="width: 100%">
    <!-- <el-table-column prop="roleName" label="角色名称" width="280" /> -->
    <!-- <el-table-column prop="icon" label="图标" width="180" /> -->
    <el-table-column label="角色名称">
      <template #default="scope">
        <div>{{ scope.row.role.roleName }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button style="margin-right: 5px;" size="large" 
        round 
        type="primary" color="#626aef"
         @click="handleUpdate(scope.row)"
         :disabled="scope.row.is_default===1 ? true:false"
         >
          更新
        </el-button>
        <el-popconfirm title="你确定要删除吗?"
         @confirm="handleRemove(scope.row)"
         confirm-button-text="确定"
          cancel-button-text="取消"
          confirm-button-type="warning"
          cancel-button-type="info"
         >
          <template #reference>
      <el-button  :disabled="scope.row.is_default===1 ? true:false" size="large"  round type="danger"  >删除</el-button>
    </template>
  </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  </div>
  <!-- 更新按钮 -->
  <el-dialog
  @close="handleUpCancel"
    v-model="showRoleDialog"
    title="更新角色·"
    width="500"
    align-center
  >
  <el-form
    ref="updataUserListRef"
    style="max-width: 1800px;"
    :model="updataUserList"
    status-icon
    :rules="rules"
    label-width="80"
    class="demo-ruleForm"
  >
  <el-form-item label="用户名" prop="userName">
      <el-input 
      v-model="updataUserList.username"
       type="text" 
        />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input 
      v-model="updataUserList.password"
      placeholder="请输入更新的密码"
       type="password" 
        />
    </el-form-item>
    <el-form-item label="角色名称" prop="roleId">
      <el-select v-model="updataUserList.roleId" placeholder="请选择角色">
      <el-option
        v-for="item in roleList"
        :key="item.id"
        :label="item.roleName"
        :value="item.id"
      ></el-option>
    </el-select>
    </el-form-item>
  </el-form>
    <template #footer >
      <div class="dialog-footer" >
        <el-button type="primary" @click="handleConfirm()">
          更新
        </el-button>
        <el-button @click="handleUpCancel()">取消</el-button>
      </div>
    </template>
  </el-dialog>



<!-- 添加用户弹框 -->
  <el-dialog
   @close="handleCancel"
    v-model="showUserDialog"
    title="添加用户"
    width="500"
    align-center
  >
  <el-form
    ref="addUserListRef"
    style="max-width: 1800px;"
    :model="addUserList"
    status-icon
    :rules="rulesUser"
    label-width="80"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="username">
      <el-input 
      v-model="addUserList.username"
       type="text" 
        placeholder="请输入用户名"
        />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input 
      v-model="addUserList.password"
       type="text" 
        placeholder="请输入密码"
        />
    </el-form-item>
    <el-form-item label="角色" prop="roleId">
    <!-- 选择框组件 -->
    <el-select v-model="addUserList.roleId" placeholder="请选择角色">
      <el-option
        v-for="item in roleList"
        :key="item.id"
        :label="item.roleName"
        :value="item.id"
      ></el-option>
    </el-select>
    </el-form-item>
  </el-form>


    <template #footer >
      <div class="dialog-footer" >
        <el-button type="primary" @click="handeleAddBtn()">
          添加
        </el-button>
        <el-button @click="handleCancel()">取消</el-button>
       
      </div>
    </template>
  </el-dialog>
</template>

<style scoped></style>
